<script lang="ts" setup>
import { ref, onActivated } from "vue";
import router from "@/router";
import applyForm from "./components/applyForm.vue";
import PageWrapper from "@/components/Wrapper";
import detailTable from "./components/detailTable.vue";
import operation from "./components/operation.vue";
import {
  getOutboundDetail,
  getOutboundAdd,
  setOutboundUpdate
} from "@/api/outbound";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { useRoute } from "vue-router";
import { add } from "@/utils/caculate";

const multiTagsStore = useMultiTagsStoreHook();
const route = useRoute();

defineOptions({
  name: "outboundEditDetail"
});
const tableData = ref([]);

const tableHeight = ref(0);
const pageWrapperRef = ref();
const applyFormRef = ref(null);
const rows = ref(0);
const total = ref(0);
const handleCurrentChange = (obj: any) => {
  initData(obj);
};

onActivated(() => {
  const { id } = router.currentRoute.value.query;
  if (!id) {
    applyFormRef.value.resetForm();
    tableData.value = [];
  }
  if (id) {
    initData(id);
  }
  pageWrapperRef.value.initData();
});

// 获取数据
const initData = (id: any) => {
  getOutboundDetail({ id: Number(id) }).then(res => {
    tableData.value = res.data.itemDetailVOList;
    applyFormRef.value.setForm(
      Object.assign(applyFormRef.value.getForm(), res.data || {})
    );
    rows.value = res.data.rows || 0;
    total.value = res.data.total || 0;
  });
};

// 提交
const submitApply = () => {
  applyFormRef.value.validateForm(() => {
    // 编辑
    const { id } = router.currentRoute.value.query;
    setOutboundUpdate(Object.assign({ id }, applyFormRef.value.getForm())).then(
      res => {
        multiTagsStore.handleTags("splice", route.path);
        router.back();
      }
    );
  });
};

// 设置表格数据
const setTableData = (data: any) => {
  tableData.value = data;
  rows.value = data.length;
  total.value = data.reduce((acc: number, curr: any) => add(acc, curr.num), 0);
};
</script>
<template>
  <div class="main_box">
    <PageWrapper
      ref="pageWrapperRef"
      v-model:height="tableHeight"
      :isShowBottom="false"
      :isShowLine="false"
    >
      <template #header>
        <applyForm
          ref="applyFormRef"
          @handle-search="handleCurrentChange"
          @setTableData="setTableData"
        />
      </template>
      <template #content>
        <div class="table_box">
          <operation />
          <detailTable :list="tableData" :tableHeight="tableHeight" />
        </div>
      </template>
      <template #footer>
        <section
          class="flex flex-row justify-between pb-[16px] pt-[16px] pr-[24px] pl-[24px] bg-white rounded-t-[8px]"
        >
          <div class="flex flex-row">
            <div class="flex flex-row items-center mr-[80px]">
              <span>出库物料记录行数：</span>
              <p class="text-[20px] font-bold">{{ rows }}</p>
            </div>
            <div class="flex flex-row items-center">
              <span>出库物料总数：</span>
              <p class="text-[20px] font-bold">{{ total }}</p>
            </div>
          </div>
          <el-button type="primary" @click="submitApply"
            ><span class="text-[16px]">提交</span></el-button
          >
        </section>
      </template>
    </PageWrapper>
  </div>
</template>
<style lang="scss" scoped></style>
